<template>
  <view>
    <view class="search-box">
      <view class="search-input">
        <input type="text" v-model="val" @input="search" />
        <view @touchend="del" v-if="showDel">
          <image src="../../static/images/delete.png"></image>
        </view>
      </view>
      <text>取消</text>
    </view>

    <template v-if="hasSearch">
      <view class="ul">
        <view
          class="li"
          v-for="(item, index) in searchInfo"
          @touchend="openIndex(item)"
          :key="index"
        >
          {{ item.address }}
        </view>
      </view>
    </template>

    <template v-else>
      <view class="hot">
        <view class="hot-title"> 热门地址 </view>
        <view class="hot-address">
          <view
            class="position"
            :class="{ w: index === 0 }"
            @touchend="openIndex(item)"
            v-for="(item, index) in hotAddress"
            :key="index"
          >
            {{ item.aname }}
          </view>
        </view>
      </view>
      <view class="history">
        <view class="history-title">
          <text>历史记录</text>
          <image src="../../static/images/close.png" mode=""></image>
        </view>
        <view class="hot-address">
          <view
            class="position"
            :class="{ w: index === 0 }"
            @touchend="openIndex(item)"
            v-for="(item, index) in historyAddress"
            :key="index"
          >
            {{ item.aname }}
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
const QQMapWX = require("../../utils/qqmap-wx-jssdk.min.js");
const qqmapsdk = new QQMapWX({
  key: "JKKBZ-A2TCR-MABWA-WQYF6-RBV4K-SCFEO",
});
export default {
  data() {
    return {
      val: "",
      showDel: false,
      searchInfo: [],
      hasSearch: false,
      hotAddress: [
        {
          aname: "定位",
        },
        {
          aname: "北京",
          location: {
            lng: "116.352963",
            lat: "40.409079",
          },
        },
        {
          aname: "上海",
          location: {
            lng: "121.463615",
            lat: "31.195908",
          },
        },
        {
          aname: "深圳",
          location: {
            lng: "114.064552",
            lat: "22.548457",
          },
        },
      ],
      historyAddress: [
				 
			],
    };
  },
  created() {
		// console.log(this.$store.state.historyAddress.length);
		const hisAdd = this.$store.state.historyAddress
		if(hisAdd.length !== 0) {
			this.historyAddress = hisAdd
		}
	},
  methods: {
    openIndex(item) {
			console.log(item);
      if (item.location) {
        const str = item.location.lng + "," + item.location.lat;
				const o = {
					aname: item.city,
					location: item.location
				}
				this.$store.commit('addHistoryAddress',o)
        uni.reLaunch({
          url: "../index/index?location=" + str,
        });

      } else {
        uni.reLaunch({
          url: "../index/index",
        });
      }
    },
    search() {
      //搜索地址
      if (this.val != "") {
        this.showDel = true;
        this.hasSearch = true;
        qqmapsdk.getSuggestion({
          keyword: this.val,
          success: ({ data }) => {
            // console.log(data)
            this.searchInfo = data;
          },
        });
      } else {
        this.showDel = false;
        this.hasSearch = false;
      }
    },
    del() {
      //清空表单
      this.val = "";
      this.searchInfo = [];
      this.hasSearch = false;
    },
  },
};
</script>

<style lang="less">
.search-box {
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .search-input {
    position: relative;
    input {
      display: block;
      height: 80rpx;
      width: 500rpx;
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 50rpx;
      padding-left: 40rpx;
    }
    view {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      right: 5px;
      top: 4px;
      z-index: 99;
      image {
        height: 100%;
        width: 100%;
      }
    }
  }
  text {
    display: block;
    width: 100rpx;
    line-height: 100rpx;
    font-size: 30rpx;
    text-align: center;
  }
}

.ul {
  color: #fff;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .li {
    width: 90%;
    font-size: 30rpx;
    text-align: center;
    line-height: 40rpx;
    padding: 20rpx;
    border-bottom: 1px solid #fff;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
}

.hot {
  color: #fff;
  padding: 20rpx;
  .hot-title {
    font-size: 32rpx;
    margin-bottom: 20rpx;
  }
  .hot-address {
    display: flex;
    .w {
      background-color: #facd91 !important;
    }
    .position {
      margin: 10rpx 20rpx;
      padding: 0 20rpx;
      text-align: center;
      line-height: 60rpx;
      background-color: rgba(255, 255, 255, 0.36);
      height: 60rpx;
      border-radius: 25rpx;
      box-shadow: 3rpx 3rpx 5rpx rgba(0, 0, 0, 0.36);
    }
  }
}

.history {
  color: #fff;
  padding: 20rpx;
  .history-title {
    display: flex;
    justify-content: space-between;
    text {
      font-size: 32rpx;
      margin-bottom: 20rpx;
    }

    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 40rpx;
    }
  }
  .hot-address {
    display: flex;

    .position {
      margin: 10rpx 20rpx;
      padding: 0 20rpx;
      text-align: center;
      line-height: 60rpx;
      background-color: rgba(255, 255, 255, 0.36);
      height: 60rpx;
      border-radius: 25rpx;
      box-shadow: 3rpx 3rpx 5rpx rgba(0, 0, 0, 0.36);
    }
  }
}
</style>
